import { type FC } from "react";
import type { componentProps } from "../../interface";
import { BookOpenCheck, Timer, Users } from "lucide-react";

const TopBar: FC<componentProps> = ({ isExpended, file }) => {
  return (
    <div
      className={`
        h-full px-10 mt-5 flex flex-row items-center justify-between
        transition-all duration-1000 ease-in-out
        border-b border-gray-300 bg-white
        ${isExpended ? "w-[1200px] -ml-[200px]" : "w-[1000px] ml-0"}
      `}
    >
      <div className="flex flex-col gap-2">
        <h1
          contentEditable
          suppressContentEditableWarning={true}
          spellCheck={true}
          aria-placeholder="请输入标题"
          className="text-3xl font-bold text-gray-900
             px-1 rounded
             focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
             selection:bg-gray-300 selection:text-white
             cursor-text"
        >
          {file?.title}
        </h1>

        <div className="text-sm text-gray-500 flex gap-6">
          <span className="inline-flex items-center gap-1">
            <Users className="w-4 h-4" />
            谭罗嘉 · 编辑
          </span>
          <span className="inline-flex items-center gap-1">
            <Timer className="w-4 h-4" />
            {file?.time} · 创建
          </span>
        </div>
      </div>

      <div className="flex items-center justify-center gap-1 text-gray-400 text-sm">
        <BookOpenCheck className="w-4 h-4" />
        <span>2</span>
      </div>
    </div>
  );
};

export default TopBar;
